<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '首页',
  },
}
</route>

<script lang="ts" setup>
import { test } from '@/services/api/foo';
import { TestEnum } from '@/typings';
import PLATFORM from '@/utils/platform';

defineOptions({
  name: 'Home',
});

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const author = ref('菲鸽');
const description = ref(
  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
);
const { data } = useRequest(test, {
  // 请求响应前，data的初始值
  initialData: [],
});
// 测试 uni API 自动引入
onLoad(() => {
  console.log(author);
  console.log(TestEnum.A);
});
</script>

<template>
  <view
    class="overflow-hidden bg-white px-4 pt-2"
    :style="{ marginTop: `${safeAreaInsets?.top}px` }"
  >
    <view class="mt-12">
      <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
    </view>
    <view class="main-title-color mt-4 text-center text-4xl">
      unibest
    </view>
    <view class="mb-8 mt-2 text-center text-2xl">
      最好用的 uniapp 开发模板
    </view>

    <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
      {{ description }}
    </view>
    <view class="mt-8 text-center">
      当前平台是：
      <text class="text-green-500">
        {{ PLATFORM.platform }}
      </text>
    </view>
    <view class="mt-4 text-center">
      模板分支是：
      <text class="text-green-500">
        base
      </text>
      <view />
    </view>
  </view>
</template>

<style>
.main-title-color {
  color: #d14328;
}
</style>
